<template>
  <div>
      <!-- 查询条件 -->
      <div class="orderactivity-header">
        <el-button  type="primary" icon="el-icon-plus" @click="add">添加员工</el-button>
        <el-button icon="el-icon-delete-solid" @click="batchDelete">批量删除</el-button>
        <i class="el-icon-close" style="font-size: 20px; color: #72767b;float: right;cursor: pointer;" @click="close"></i>
      </div>
      <el-divider></el-divider>
      <!-- Table组件 -->
      <div class="contacts-content">
        <main-table :columns="columns" :data="activityOlderList" :isPaginationShow="false" @getData="getList" :loading="loading" @handleSelectChange="handleSelectChange" @selectAll="selectAll" wrapperHeight="100%" height="calc(100vh - 120px)">
          <!-- wrapperHeight：父元素高度根据实际布局情况配置，大多情况可能是 外层祖父元素高度 减去 其他兄弟元素的高度，如果外层祖父元素高度或者兄弟元素的高度不固定，可能需要借助 js来计算 -->
          <el-table-column slot="action" fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-popconfirm title="确定要删除该员工吗？" @confirm="del(scope.row)">
                <el-button slot="reference" size="mini" type="primary"  class="button-delete-color"><i class="el-icon-delete"></i> 删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </main-table>
       </div>
      <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="1000px"
        :append-to-body="true">
         <orderactivity-servicer-add v-if="dialogVisible" :activityid="activityid" :activityolderlist="activityOlderList" @cancle="dialogVisible = false" @load="load"></orderactivity-servicer-add>
      </el-dialog>
  </div>
</template>

<script>
import { unixToDate } from "@/utils"
import mainTable from "@/components/main-table/index";
import * as APIOrderactivity from '@/api/orderactivity'
import orderactivityServicerAdd from './orderactivity-servicer-add'
export default {
  name: 'orderactivity-servicer',
  props: {
    activityid: {
      type: String,
      default: ''
    }
  },
  components: {
    mainTable,
    orderactivityServicerAdd
  },
  data () {
    return {
      title: '添加员工',
      dialogVisible: false,
      loading: false,
      activityOlderList: [],
      columns: [
        {
          selection: true,
          fixed: true
        },
        {
          index: true,
          fixed: true
        },
        {
          prop: 'name',
          label: '员工姓名',
        },
        {
          prop: 'create_time',
          label: '添加老人时间',
          formatter (row, column, cellValue) {
            return unixToDate(cellValue)
          }
        },
        {
          slot: 'action'
        }
      ],
      selectionOld:[]
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 选中老人
    handleSelectChange (val) {
      this.selectionOld = val
    },
    // 全选
    selectAll (val) {
      this.selectionOld = val
    },
    // 添加老人后重载
    load () {
      this.getList()
    },
    batchDelete(){
      const arr = []
      if(this.selectionOld.length == 0){
        this.$message({message: '请选择员工',type: 'error',duration: 5 * 1000})
        return false;
      }
      this.selectionOld.forEach(item => {
        arr.push(item['servicer_id'])
      })
      APIOrderactivity.orderactivityEditservicer({
        activity_id: this.activityid,
        servicer_id: arr.join(','),
        status: '2'  // 1 添加   2 删除
        }).then((resp) => {
         if (resp.code == 200) {
          this.$message({ type: "success", message: "删除成功!"});
          this.load()
         }
      })
    },
    // 删除老人
    del (rows) {
      APIOrderactivity.orderactivityEditservicer({
        activity_id: this.activityid,
        'servicer_id': rows['servicer_id'],
        'status':'2'
        }).then((resp) => {
         if (resp.code == 200) {
          this.$message({ type: "success", message: "删除成功!"});
          this.load()
         }
      })
    },
    // 添加老人
    add () {
      this.dialogVisible = true
    },
    getList () {
      this.loading = true
      APIOrderactivity.orderactivityInfo({ id: this.activityid }).then((resp) => {
        if (resp.code === 200) {
          const { servicer = [], total = 0 } = resp.data;
          this.activityOlderList = servicer || []
        }
      }).finally(() => {
        this.loading = false
      })
    },
    close () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
  .orderactivity-header{
     padding: 20px;
     padding-bottom: 7px;
  }
  .contacts-content {
   padding: 0 20px;
   padding-bottom: 7px;
  }
</style>
